<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/3/14 0014
  Time: 16:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="/js/echarts.js"></script>

<%--引入vue的js--%>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<%--引入element的js--%>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="/axios/axios.min.js"></script>
<%--引入elementui的样式--%>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<html>
<head>
    <title>Title</title>
</head>

<body>
<div id="app">
    <div id="main" style="width: 600px;height:400px;">
    </div>
</div>

<div id="app1">


    <div id="main1" style="width: 600px;height:400px;"/>

</div>
<script>
    let app3 = new Vue({
        el:"#app",

        created() {
            this.initEcharts();

        },
        methods: {
            initEcharts() {
                axios.post("/emp/pieChart").then(result => {
                    console.log(result)
                    var myChart = echarts.init(document.getElementById('main1'));
                    myChart.setOption(
                        {
                            title: {
                                text: '部门人数统计',
                                subtext: 'Fake Data',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left'
                            },
                            series: [
                                {
                                    name: 'Access From',
                                    type: 'pie',
                                    radius: '50%',
                                    data: result.data,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        }
                    )
                })
            }
        }


    })

    /*dierge*/

  new Vue({
        el:"#app1",
        data: {
            name1: [],
            value1: []

        },
        created() {
            this.initEcharts();

        },
        methods: {
            initEcharts() {
                axios.post("/emp/echartsTree").then(result => {
                    for (let i = 0; i < result.data.length; i++) {
                        this.name1.push(result.data[i].name)
                        this.value1.push(result.data[i].value)
                    }
                    console.log(result)
                    console.log(this.value1)
                    var myChart = echarts.init(document.getElementById('main'));
                    myChart.setOption(
                        {
                            xAxis: {
                                type: 'category',
                                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                                data: this.name1
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    data: this.value1,
                                    type: 'bar',
                                    showBackground: true,
                                    backgroundStyle: {
                                        color: 'rgba(180, 180, 180, 0.2)'
                                    }
                                }
                            ]
                        }
                    )
                })
            }
        }


    })

</script>
</body>
</html>

















